<template>
  <!-- 主体 -->
  <div id="main">
    <!-- 登陆框 -->
    <div class="login">
      <div class="title">
        商家登录
      </div>

      <!-- 正常登录方式 -->
      <div v-if="!flag">
        <div class="label1">
          密码登陆
        </div>
        <div class="code" style="border: none;color: #8C8889;font-weight: bold;" @click="this.FlagToTrue">
          验证码登陆
        </div>
        <div class="input">
          <form id="app" style="margin-top:10px;">
            <div class="data"><input type="text" id="email" v-model="email" placeholder="邮箱"></div>
            <div class="data"><input type="password" id="pass" v-model="pass" placeholder="密码"></div>
            <div v-if="email_flag & pass_flag" class="flag">
              <input type="submit" value="登录" @click="this.login_pass">
            </div>
            <div class="submit" v-else>
              <input type="button" value="登录">
            </div>
          </form>
          <div class="register">
            没有账号?
            <router-link to="/register" style="color: #EA5169;">立即注册</router-link>
          </div>
        </div>
      </div>

      <!-- 切换登录方式 -->
      <div v-else>
        <div class="label1" style="border: none;color: #8C8889;font-weight: bold;" @click="this.FlagToFalse">
          密码登陆
        </div>
        <div class="code">
          验证码登陆
        </div>
        <div class="input">
          <form id="app" style="margin-top:10px;">
            <div class="data"><input type="text" id="email" v-model="email" placeholder="邮箱"></div>
            <div class="data"><input type="text" id="pass" v-model="code" placeholder="验证码"></div>
            <a style="font-size: 12px;color:#EA5169; position: absolute;top:332px;right:380px"
              @click="this.sendcode">立即发送</a>
            <div v-if="email_flag & code_flag" class="flag">
              <input type="submit" value="登录" @click="this.login_code">
            </div>
            <div class="submit" v-else>
              <input type="button" value="登录">
            </div>
          </form>
          <div class="register">
            没有账号?
            <router-link to="/register" style="color: #EA5169;">立即注册</router-link>
          </div>
        </div>
      </div>

      <div class="line"></div>
      <div class="copyright">©2014-2023 Copyright © HNKJZY. All rights reserved.</div>
    </div>

  </div>
</template>

<script>

import { SendCode, LoginPass, LoginCode } from '../../wailsjs/go/pkg/User';
import Auth from "../auth/auth"
export default {
  name: "login",
  data() {
    return {
      email: "",  //用户输入的邮箱
      pass: "",   //用户输入的密码
      code: "", //验证码code
      email_flag: false, //判断邮箱是否合理
      pass_flag: false,  //判断密码是否合理
      code_flag: false,  //判断验证码是否合理
      flag: false //登陆方式默认是false
    }
  },
  //实现监控
  watch: {
    email: function (newVal, oldVal) {
      // 定义一个正则表达式来判断是否为邮箱地址
      var emailRegex = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
      // 判断新的值是否为有效的邮箱地址
      if (emailRegex.test(newVal)) {
        this.$data.email_flag = true;
      } else {
        this.$data.email_flag = false;
      }
    },
    //监控pass
    pass: function (newVal, oldVal) {
      //如果密码长度大于6位数则合理
      if (newVal.length >= 6) {
        this.$data.pass_flag = true;
      } else {
        this.$data.pass_flag = false
      }
    },
    code: function (newVal, oldVal) {
      //如果密码长度大于6位数则合理
      if (newVal.length != 6) {
        console.log(false);
      } else {
        this.$data.code_flag = true
      }
    },
  },
  methods: {
    //切换登录方式
    FlagToTrue() {
      this.$data.pass = ''
      this.$data.email = ''
      this.$data.flag = true
    },
    FlagToFalse() {
      this.$data.email = ''
      this.$data.code = ''
      this.$data.flag = false
    },

    //实现验证码发送功能
    sendcode() {
      // 定义一个正则表达式来判断是否为邮箱地址
      var emailRegex = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
      // 判断新的值是否为有效的邮箱地址
      if (emailRegex.test(this.$data.email)) {
        SendCode(this.$data.email).then((result) => {
          console.log(result)
        }).catch((result) => {
          console.log(result);
        })
        this.$notify({
          title: '成功',
          message: '验证码发送成功',
          type: 'success'
        });
      } else {
        this.$notify({
          title: '警告',
          message: '请输入正确的邮箱',
          type: 'warning'
        });
      }
    },

    //实现账号密码登陆
    login_pass() {
      LoginPass(this.$data.email, this.$data.pass).then((result) => {
        if (result.code == 200) { //代表用户登陆成功
          Auth.setFrontAuth(result.token, result.email) //设置token
          this.$router.push("/")
        }
      }).catch((result) => {
        console.log(result);
      })
    },

    //实现用户验证码登陆
    login_code() {
      LoginCode(this.$data.email, this.$data.code).then((result) => {
        if (result.code == 200) { //代表用户登陆成功
          Auth.setFrontAuth(result.token, result.email) //设置token
          this.$router.push("/")
        }
      }).catch((result) => {
        console.log(result);
      })
    }
  },
}
</script>

<style scoped>
#main {
  background-image: url('../assets/images/background.jpg');
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  cursor: pointer;
}

.login {
  border: 1px solid #fff;
  width: 40%;
  height: 500px;
  border-radius: 10px;
  margin: 0 auto;
  margin-top: 70px;
  background-color: #fff;
  -webkit-user-select: none;
  /*webkit浏览器*/
  -khtml-user-select: none;
  /*早期浏览器*/
  -moz-user-select: none;
  /*火狐*/
  -ms-user-select: none;
  /*IE10*/
  user-select: none;
}

.title {
  font-size: 30px;
  font-weight: bolder;
  text-align: center;
  margin-top: 40px;
  -webkit-user-select: none;
  /*webkit浏览器*/
  -khtml-user-select: none;
  /*早期浏览器*/
  -moz-user-select: none;
  /*火狐*/
  -ms-user-select: none;
  /*IE10*/
  user-select: none;
}

.label1 {
  font-size: 18px;
  font-weight: bold;
  margin-top: 40px;
  border-bottom: 3px solid #EA5169;
  width: 76px;
  margin-left: 50px;
  -webkit-user-select: none;
  /*webkit浏览器*/
  -khtml-user-select: none;
  /*早期浏览器*/
  -moz-user-select: none;
  /*火狐*/
  -ms-user-select: none;
  /*IE10*/
  user-select: none;
}

.code {
  font-size: 18px;
  font-weight: bold;
  border-bottom: 3px solid #EA5169;
  width: 96px;
  margin-left: 240px;
  margin-top: -30px;
  -webkit-user-select: none;
  /*webkit浏览器*/
  -khtml-user-select: none;
  /*早期浏览器*/
  -moz-user-select: none;
  /*火狐*/
  -ms-user-select: none;
  /*IE10*/
  user-select: none;
}

.data input {
  margin-top: 20px;
  border-radius: 7px;
  margin-left: 50px;
  border: 2px solid #EA5169;
  width: 300px;
  height: 45px;
  padding-left: 10px;
}

.message {
  margin-top: 20px;
  margin-left: 50px;
  width: 300px;
  height: 45px;
}

.submit {
  margin-top: 25px;
}

.submit input {
  margin-top: 0px;
  border-radius: 7px;
  margin-left: 50px;
  border: 2px solid #F9CAD2;
  width: 300px;
  height: 45px;
  color: #fff;
  background-color: #F9CAD2;
}

.flag {
  margin-top: 25px;
}

.flag input {
  margin-top: 0px;
  border-radius: 7px;
  margin-left: 50px;
  border: 2px solid #EA5169;
  width: 300px;
  height: 45px;
  color: #fff;
  background-color: #EA5169;
}

.register {
  margin-left: 53px;
  font-size: 12px;
  margin-top: 5px;
  color: #8C8889;
  cursor: pointer;
}

.line {
  width: 302px;
  border-bottom: 1px solid #8B8889;
  text-align: center;
  margin: 0 auto;
  margin-top: 30px;
  margin-bottom: 30px;
}

.copyright {
  color: #8B8889;
  font-size: 10px;
  text-align: center;
}
</style>